<template>
  <div class="Box">
    <!-- 筛选 -->

    <!-- <div class="screen_content">
        <div class="screen_content_first">
          <i class="el-icon-search">筛选搜索</i>
          <div class="screen_content_first_btutton"></div>
        </div>
        <div class="screen_content_second">
          <div class="screen_content_second_one">
            <div style="width:150px">问卷标题:</div>
            <el-input
              v-model="Rule_name"
              placeholder="请输入问卷标题"
              clearable
              @clear="clearclick()"
            ></el-input>
            <el-button
              style="margin-left:10px;"
              @click="Search()"
              type="primary"
              >查询搜索</el-button
            >
          </div>
        </div>
      </div> -->
    <div class="screen1">
      <div class="screen_content">
        <div class="screen_content_first">
          <i class="el-icon-tickets">数据列表</i>
          <el-button
            style="margin-right:20px;width:120px;"
            @click="handleClick()"
            size="medium"
            >查看问卷情况</el-button
          >
        </div>
      </div>
    </div>

    <div class="tables">
      <!-- 表格 -->
      <el-table
        fit
        border
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :header-cell-style="headerclass"
        align:center
        style="width: 100%"
      >
        <!-- <el-table-column
          align="center"
          prop="user_id.name"
          label="用户名称"
          fixed="left"
        >
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="question_id.title"
          label="问卷标题"
        ></el-table-column>
        <el-table-column align="center" label="问卷情况">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.option" :key="index">
              <div v-if="item.optiontype == 1" class="flexss">
                <div>
                  <p class="titles">单选 {{ item.optiontitle }}:</p>
                </div>
                <div
                  v-for="(item1, index1) in item.subopitonstitile"
                  :key="index1"
                >
                  {{ lists.option[index].subopitons[item1].subopitonstitile }}
                </div>
              </div>
              <div v-else-if="item.optiontype == 2" class="flexss">
                <div>
                  <p class="titles">多选 {{ item.optiontitle }}:</p>
                </div>
                <div
                  v-for="(item1, index1) in item.mulopitonstitile"
                  :key="index1"
                >
                  {{ lists.option[index].mulopitons[item1].subopitonstitile }}
                </div>
              </div>
              <div v-else-if="item.optiontype == 3" class="flexss">
                <div>
                  <p class="titles">填空 {{ item.optiontitle }}:</p>
                </div>
                <div
                  v-for="(item1, index1) in item.subopitonstitile"
                  :key="index1"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="参与人数">
          <template slot-scope="scope">{{scope.row.votepeople.length}}</template>
        </el-table-column> -->
        <!-- <el-table-column align="center" label="问卷情况">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.option" :key="index" class="fordatas">
              {{item.optiontitle}}
              {{item.optionnum}}
              <div
                v-if="scope.row.votepeople.length!=0"
              >{{item.optionnum/scope.row.votepeople.length}}</div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="问卷时间" width="200px">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.option_time | timeF }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button @click="changeClick1(scope.row)" type="primary" size="mini">改变状态</el-button>
            <el-button @click="checkClick(scope.row)" type="success" plain size="mini">查看问卷</el-button>
            <el-button @click="deleteClick(scope.row)" type="danger" plain size="mini">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="isShown">
      <el-form :model="lists" label-position="right">
        <el-form-item label="问卷标题">
          {{ lists.title }}
        </el-form-item>
        <el-form-item label="问卷描述">
          <div style="width:400px">{{ lists.describe }}</div>
        </el-form-item>
        <el-form-item label="截止时间">
          {{ lists.endtime | timeF }}
        </el-form-item>
        <el-form-item label="问卷图片">
          <img
            style="width:100px"
            :src="Question_img_prefix + lists.images"
            v-if="lists.images"
          />
          <div v-else>无主图</div>
        </el-form-item>
        <el-form-item label="问卷链接">
          <el-link v-if="lists.videos" :href="lists.videos" target="primary">{{
            lists.videos
          }}</el-link>
          <div v-else>无问卷链接</div>
        </el-form-item>
        <el-form-item>
          <div>问卷情况</div>
          <div v-for="(item, index) in lists.option" :key="index">
            <div v-if="item.optiontype == 1">
              <div class="flexcontents1">
                <p class="titles">选项{{ index + 1 }}</p>
              </div>
              <div class="flexs">
                <div class="flexcontents3">
                  选项标题：{{ item.optiontitle }}
                </div>
                <div class="flexcontents4">
                  选项类型：{{ item.optiontype | statustype }}
                </div>
                <div v-for="(item1, index1) in item.subopitons" :key="index1">
                  <div class="flexcontents4">
                    子选项标题：{{ item1.subopitonstitile }}
                  </div>
                  <div class="flexcontents4">
                    选择数：{{ item1.subopitonsnum }}
                  </div>
                  <div class="flexcontents5" v-if="tableData1.length > 0">
                    占比值：{{
                      (item1.subopitonsnum / tableData1.length) * 100
                    }}%
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.optiontype == 2">
              <div class="flexcontents1">
                <p class="titles">选项{{ index + 1 }}</p>
              </div>
              <div class="flexs">
                <div class="flexcontents3">
                  选项标题：{{ item.optiontitle }}
                </div>
                <div class="flexcontents4">
                  选项类型：{{ item.optiontype | statustype }}
                </div>
                <div v-for="(item1, index1) in item.mulopitons" :key="index1">
                  <div class="flexcontents4">
                    子选项标题：{{ item1.subopitonstitile }}
                  </div>
                  <div class="flexcontents4">
                    选择数：{{ item1.subopitonsnum }}
                  </div>
                </div>
              </div>
            </div>

            <div v-if="item.optiontype == 3">
              <div class="flexcontents1">
                <p class="titles">选项{{ index + 1 }}</p>
              </div>
              <div class="flexs">
                <div class="flexcontents3">
                  填空标题：{{ item.optiontitle }}
                </div>
                <div class="flexcontents4">
                  选项类型：{{ item.optiontype | statustype }}
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getquestionlist,
  putquestionlist,
  deletequestionlist,
  getquestionreplylist
} from "@/api/questionpc";
import { formatDateTime } from "../../common/Time";

import Vue from "vue";

import VueDirectiveImagePreviewer from "vue-directive-image-previewer";
import "vue-directive-image-previewer/dist/assets/style.css";
Vue.use(VueDirectiveImagePreviewer);
import { Question_img_prefix } from "@/utils/global";

export default {
  data() {
    return {
      lists: {},
      Question_img_prefix: Question_img_prefix,
      rows: { option: [] },
      isShown: false, //弹窗开关
      Rule_name: "", //搜索规则标题
      tableData: [], // 表格数据
      tableData1: [], // 表格数据
      pagesize: 10, //分页显示多少条数据
      currentPage: 1 //分页默认第几个页面
    };
  },
  filters: {
    statustype(status) {
      const statusMap = {
        1: "单选",
        2: "多选",
        3: "填空"
      };
      return statusMap[status];
    },
    timeF(val) {
      return formatDateTime(Date.parse(val));
    }
  },
  created() {
    this.getdata();
  },
  computed: {
    sum: function() {
      if (this.rows.option) {
        var list = new Array();
        for (var i in this.rows.option) {
          list.push(this.rows.option[i].optionnum);
        }
        list.sort(function(num1, num2) {
          return num1 - num2;
        });
        var maxcnt = eval(list[list.length - 1]);
        return maxcnt;
      } else {
        return "";
      }
    }
  },
  methods: {
    async getdata() {
      try {
        if (this.$route.params.row) {
          window.sessionStorage.removeItem("queston_id");
          sessionStorage.setItem(
            "queston_id",
            JSON.stringify(this.$route.params.row)
          );
          var data = {
            query: { question_id: this.$route.params.row._id },
            populate: JSON.stringify([
              { path: "user_id", populate: [{ path: "department" }] },
              { path: "question_id" }
            ])
          };
          console.log(data);
          getquestionreplylist(data).then(response => {
            this.tableData1 = response.data;
            this.tableData = this.tableData1;
            console.log(this.tableData);
          });

          var data1 = {
            query: { _id: this.$route.params.row._id }
          };
          getquestionlist(data1).then(response => {
            this.lists = response.data[0];
            console.log(this.lists);
          });
        } else {
          if (window.sessionStorage.getItem("queston_id")) {
            let userinfo = JSON.parse(
              window.sessionStorage.getItem("queston_id")
            );
            console.log(userinfo);
            var datas = {
              query: { question_id: userinfo._id },
              populate: JSON.stringify([
                { path: "user_id" },
                { path: "question_id" }
              ])
            };
            getquestionreplylist(datas).then(response => {
              this.tableData1 = response.data;
              this.tableData = this.tableData1;
              console.log(this.tableData);
            });

            var reqdata = {
              query: { _id: userinfo._id }
            };
            getquestionlist(reqdata).then(response => {
              this.lists = response.data[0];
              console.log(this.lists);
            });
            //  console.log(this.VoucherData2)
            // rLoading.close();
          } else {
            this.$message.error("请求失败，请重新刷新或返回上一页");
            // rLoading.close();
          }
        }
      } catch (e) {
        this.$message.error("请求失败，请重新刷新或返回上一页");
      }
    },
    changeClick1(data) {
      console.log(data);
      var datas = {
        query: { _id: data._id },
        update: {
          $set: {
            status: !data.status
          }
        }
      };

      putquestionlist(datas).then(response => {
        if (
          response.data.n == 1 &&
          response.data.nModified == 1 &&
          response.data.ok == 1
        ) {
          this.$notify({
            title: "已修改投票状态",
            message: "以将" + data.title + "状态改变",
            type: "success",
            duration: 2000
          });
          this.getdata();
        } else {
          this.$notify({
            title: "修改失败，请重试或刷新",
            message: "未将" + data.title + "状态改变",
            type: "danger",
            duration: 2000
          });
        }
      });
    },
    clearclick() {
      this.tableData = this.tableData1;
    },
    //搜索按钮事件
    Search() {
      if (this.Rule_name) {
        var datas = this.searchByIndexOf(this.Rule_name, this.tableData1);
        this.tableData = datas;
      } else {
        this.tableData = this.tableData1;
      }
    },
    //模糊查询1:利用字符串的indexOf方法
    searchByIndexOf(keyWord, list) {
      if (!(list instanceof Array)) {
        return;
      }
      var len = list.length;
      var arr = [];

      for (var i = 0; i < len; i++) {
        //如果字符串中不包含目标字符会返回-1
        if (list[i].title.indexOf(keyWord) >= 0) {
          arr.push(list[i]);
        }
      }
      return arr;
    },
    //编辑内容
    handleClick1(num) {
      this.$router.push({
        name: "rule_adit",
        params: {
          id: num
        }
      });
    },
    //查看事件
    aditClick(row) {
      this.htmls = row.Rule_message;
      if (this.isShown) {
        this.isShown = false;
      } else {
        this.isShown = true;
      }
    },
    //添加事件
    handleClick() {
      if (this.isShown) {
        this.isShown = false;
      } else {
        this.isShown = true;
      }
    },
    checkClick(row) {
      this.rows = row;
      this.isShown = true;
    },
    //删除事件
    deleteClick(num) {
      var that = this;
      that
        .$confirm("确认删除吗？")
        .then(async () => {
          var data = {
            query: { _id: num._id }
          };
          var datas = await deletequestionlist(data);
          console.log(datas);
          if (
            datas.data.deletedCount == 1 &&
            datas.data.n == 1 &&
            datas.data.ok == 1
          ) {
            that.getdata();
            this.$notify({
              title: "已删除成功",
              message: "以将" + num.title + "删除",
              type: "success",
              duration: 2000
            });
          }
        })
        .catch(() => {});
    },
    //表格表头的样式
    headerclass() {
      return "background:#f2f6fc;color:#505050;font-weight:500;text-align: center;";
    },
    //分页--初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size; //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage; //点击第几页
    }
  }
};
</script>

<style lang="scss" scoped>
.Box {
  background-color: #ffffff;
  padding: 20px 0;
  .screen {
    margin: 2vw;
    width: 96%;
    border: 1px solid #ebeef5;
    border-radius: 5px;
  }
  .screen1 {
    margin: 0 2vw 0 2vw;
    width: 96%;
    border: 1px solid #ebeef5;
    border-radius: 5px;
  }
  .screen_content {
    display: flex;
    flex-direction: column;
  }
  .screen_content_first {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .el-icon-search {
    padding: 8px;
  }
  .el-icon-tickets {
    line-height: 30px;
  }
  .screen_content_second {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .screen_content_second_one {
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .tables {
    margin: 1vw 2vw 1vw 2vw;
    width: 96%;
    border-radius: 5px;
  }
  .block {
    margin: 2vw;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
  .fordatas {
    display: flex;
    flex-direction: row;
  }
  .el-tag {
    margin-bottom: 5px;
  }
  .flexcontents1 {
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }
  .flexs {
    display: flex;
    flex-direction: column;
  }
  .flexcontents3 {
    font-weight: 600;
  }
  .flexss {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .titles {
    color: #000;
  }
  .el-form {
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
